<template>
    <card dis-hover>
        <spin v-show="infoloading" fix></spin>
        <i-form :label-width="90"
                :model="form"
                ref="form"
                :rules="rules">
            <form-item label="文章名称" prop="title">
                <i-input v-model="form.title" placeholder="请填写文章名称"></i-input>
            </form-item>
            <form-item label="置顶">
                <i-switch v-model="form.top"></i-switch>
            </form-item>
            <form-item label="栏目" prop="tag">
                <tag-select v-model="form.tag"/>
            </form-item>
            <form-item label="文章简介">
                <i-input type="textarea" v-model="form.desc" placeholder="请填写文章简介"></i-input>
            </form-item>
            <form-item label="文章内容">
                <editor z-index="1" v-model="form.content"></editor>
            </form-item>
            <form-item>
                <i-button v-if="type === 'edit'" :loading="loading" @click="submitFn" type="primary">
                    {{loading ? '修改中，请稍后' : '提交修改'}}
                </i-button>
                <i-button v-else :loading="loading" @click="submitFn" type="primary">
                    {{loading ? '发布中，请稍后' : '提交发布'}}
                </i-button>
            </form-item>
        </i-form>
    </card>
</template>
<script>
    import API from '../../lib/API_PATH'
    import editor from '../../components/editor'
    import tagSelect from '../../components/tag-select'

    export default {
        name: 'CeArticle',
        data() {
            return {
                type: 'create',
                loading: false,
                form: {
                    title: '',
                    desc: '',
                    top: false,
                    content: "",
                    tag: [],
                    id: ''
                },
                rules: {
                    title: [
                        {required: true, min: 3, message: '文章名称最少三个字符', trigger: 'blur'},
                    ],
                    tag: [
                        {required: true, type: 'array', min: 1, message: '最少选择一个栏目', trigger: 'change'},
                    ]
                },
                infoloading: false
            }
        },
        created() {
            const query = this.$route.query
            this.type = query.type
            if (query.id) {
                this.form.id = query.id
                this.getInfo()
            }
        },
        mounted() {
        },
        methods: {
            // 发布/修改文章
            submitFn() {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        this.httpFn()
                    }
                })
            },
            // 新增
            async httpFn() {
                const req = this.form
                this.loading = true
                try {
                    let method = 'post'
                    let txt = '新增'
                    if (this.type === 'edit') {
                        method = 'put'
                        txt = '修改'
                    }
                    const {data} = await this.$http[method](API.ARTICLE, req)
                    this.$Message.success(`${txt}文章成功`)
                    if (this.type === 'edit') {
                        this.$Modal.confirm({
                            content: '文章修改成功，是否要返回文章列表？',
                            okText: '返回文章列表',
                            cancelText: '继续修改',
                            onOk: () => {
                                this.$router.push('/article_page')
                            }
                        })
                    } else {
                        this.$Modal.confirm({
                            content: '文章发布成功，是否要清空表单继续发布新的文章？',
                            okText: '清空',
                            cancelText: '不清空',
                            onOk: () => {
                                this.form.title = ''
                                this.form.desc = ''
                                this.form.content = ''
                                this.form.top = false
                            }
                        })
                    }

                } catch (e) {
                    console.log(e)
                    this.$utils.errMessage(e, '新增文章')
                }
                this.loading = false
            },
            // 获取详情
            async getInfo() {
                this.infoloading = true
                try {
                    const params = {
                        id: this.form.id
                    }
                    const {data} = await this.$http.get(API.ARTICLE_DETAIL, {params})
                    let tag = []
                    for (let i of data.tag) {
                        tag.push(i._id)
                    }
                    this.form.title = data.title
                    this.form.tag = tag
                    this.form.top = data.top
                    this.form.desc = data.desc
                    this.form.content = data.content
                } catch (e) {
                    console.log(e)
                    this.$utils.errMessage(e, '文章获取')
                }
                this.infoloading = false
            }
        },
        components: {
            editor,
            tagSelect
        }
    }
</script>
